<template>
  <view class="button-demo p-base">
    <!-- 基础类型按钮 -->
    <view class="flex flex-wrap gap-sm mb-base">
      <Button>默认按钮</Button>
      <Button type="success">成功按钮</Button>
      <Button type="warning">警告按钮</Button>
      <Button type="danger">危险按钮</Button>
      <Button type="info">信息按钮</Button>
    </view>

    <!-- 特殊类型按钮 -->
    <view class="flex flex-wrap gap-sm mb-base">
      <Button type="outline">轮廓按钮</Button>
      <Button type="text">文本按钮</Button>
    </view>

    <!-- 不同尺寸 -->
    <view class="flex flex-wrap gap-sm mb-base">
      <Button size="sm">小按钮</Button>
      <Button size="base">基础按钮</Button>
      <Button size="lg">大按钮</Button>
    </view>

    <!-- 状态示例 -->
    <view class="flex flex-wrap gap-sm mb-base">
      <Button disabled>禁用按钮</Button>
      <Button loading>加载中</Button>
      <Button loading type="danger">提交中</Button>
    </view>

    <!-- 带图标和徽章 -->
    <view class="flex flex-wrap gap-sm mb-base">
      <Button>
        <template #icon>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
          </svg>
        </template>
        带图标
      </Button>
      <Button type="success" badge="9">消息</Button>
      <Button type="warning" badge="99+">通知</Button>
    </view>

    <!-- 块级按钮 -->
    <view class="mb-base">
      <Button block type="primary">块级按钮</Button>
    </view>
  </view>
</template>

<script setup lang="ts">
import Button from '../../components/Button/Button.vue';
</script>

<style lang="scss" scoped>
  @import "../../styles/index.scss";
  
// 示例页面样式
.gap-sm {
  gap: $spacing-sm;
  margin-bottom: $spacing-sm;
}
</style>